<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form>
      <switch-normal v-model="commonAttr.isViewAnswer" label="查看答案" @change="onChangeAttr"></switch-normal>
      <input-normal label="题序号前缀" placeholder="A,B,C,D" v-model="commonAttr.serialPrefix" @change="onChangeAttr"></input-normal>
      <input-normal label="题选项前缀" placeholder="Q" v-model="commonAttr.questionPrefix" @change="onChangeAttr"></input-normal>

      <color-normal  v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字体大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <!-- <switch-normal v-model="commonAttr.isRelate" label="添加新项是否有关联选项" @change="onChangeAttr"></switch-normal> -->
      <dropdown-normal v-model="newType" :valLists="FORM_SCORE_TYPES" label="表单类型" :bIsBtn="false"></dropdown-normal>
      <el-button type="primary" @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10">
        <el-icon><i class="jy-icon-plus"></i></el-icon>增加内容
      </el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            计分项{{index+1}}
            <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <textarea-normal label="名字（标题）" placeholder="请在此处输入内容" v-model="item.name" @change="onUpdateItem(index)"></textarea-normal>
          <add-img-con :url="item.imgUrl" picAttr="imgUrl" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="答案索引" placeholder="0,1,2,3是选项索引用逗号分隔" v-model="item.right" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="每道题分数" v-model="item.score" @change="onUpdateItem(index)"></input-normal>
          <textarea-normal label="答案说明" v-model="item.info" @change="onUpdateItem(index)"></textarea-normal>
          <!-- options -->
          <el-button type="primary" @click.stop="onAddOptionItem(item, index)" class="margin-bottom-10 margin-left-right-16 padding-6">
            <el-icon><i class="jy-icon-plus"></i></el-icon> 增加选项
          </el-button>
          <el-collapse v-model="activeNames_" class="margin-left-right-16">
            <el-collapse-item v-for="(option, qIndex) in item.options"  :name="qIndex+1" :key="qIndex">
              <template #title>
                选项{{qIndex+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteOptionItem($event, index, qIndex)"></i>
              </template>
              <input-normal :label="'选项' + qIndex" placeholder="选项内容" v-model="item.options[qIndex]" @change="onUpdateOptionItem(index)"></input-normal>
            </el-collapse-item>
          </el-collapse>
          <!-- <input-normal label="导出表名" v-model="item.tableKey" @change="onUpdateItem(index)"></input-normal> -->
        </el-collapse-item>
      </el-collapse>

      <el-divider content-position="center">提交按钮样式配置</el-divider>
      <submit-button :btnComponentData="componentData.btn" comAttr="btn"></submit-button>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SubmitButton from '@/views/components/submit-button.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'

import { editUtils } from '@/views/js/edit-utils'
import { FORM_SCORE_TYPES, ADD_FORM_SCORE_LISTS } from '@/common/const-form';

export default {
  name: "RightFormScore",
  mixins: [editUtils],
  setup () {
    return {
      activeNames_: [1],
      FORM_SCORE_TYPES: FORM_SCORE_TYPES,
      formLists_: null,
      newType: 'radio',
    };
  },
  components: {
    RightTemplate,
    InputNormal, 
    TextareaNormal,
    DropdownNormal,
    SubmitButton,
    ColorNormal,
    SliderNormal,
    SwitchNormal,
    AddImgCon,
  },
  methods: {
    onAddItem(){
      let item = _.cloneDeep(ADD_FORM_SCORE_LISTS[this.newType]);
      this.addComponentItem(item);
    },
    onAddOptionItem(item, index){
      let optionItem = _.cloneDeep(ADD_FORM_SCORE_LISTS[item.type].options[0])
      item.options.push(optionItem);
      this.updateComponentItem({index, item});
    },
    onUpdateOptionItem(index){
      let item = this.lists[index];
      this.updateComponentItem({index, item});
    },
    onDeleteOptionItem(e, index, qIndex){
      e.stopPropagation();
      e.preventDefault();

      let item = this.lists[index];
      item.options.splice(qIndex, 1);
      this.updateComponentItem({index, item});
    },
  },
};
</script>
